<template>
  <div class="data-info">
    <div ref="container"></div>
  </div>
</template>

<script>
import Chart from "@/components/g2/chart";

export default {
  props: {},
  data() {
    return {
      chart: "",
      table: [],
    };
  },
  created() {
    console.log("table", this.table);
    console.log("table1", this.hello);

    //  this.search();
  },
  mounted() {
    const data = [
      { year: "服务业", value: 100 },
     
    
    ];
    // Step 1: 创建 Chart 对象
    const chart = new Chart({
      container: this.$refs["container"], // 指定图表容器 ID
      autoFit: true,
      height: 350,
      padding: [20, 20, 100, 50],
    });
    this.chart = chart;
    // Step 2: 载入数据源
    chart.data(data);
    chart.theme("antv");
    chart.scale("value", {
      alias: "(户)",
    });
    chart.axis("year", {
      tickLine: {
        alignTick: false,
      },
     
    });
   
    // Step 3: 创建图形语法，绘制柱状图
    chart.interval().position("year*value");
    chart.render();
  },
  methods: {
    changeData(data) {
      console.log("data1", data);

      data.reverse()
      data.forEach((element) => {
        this.table.push({
          year: element.key_as_string,
          value: element.doc_count,
        });
        console.log(this.table);
      });

     this.chart.changeData(this.table);
    },
  },
};
</script>
